<template>
  <div id="app">
    <div class="gameBtn" @click="start()">开始</div>
    <div class="gameBtn" @click="pause()">暂停</div>
    <div v-for="(rows, i) in initMapGrid" :key="i">
      <div :class="{ 'active-cube': cols === 1}" style="width:20px;height:20px; margin:2px; padding:2px; border:1px solid #333; background-color:black; display:inline-block" v-for="(cols, j) in rows" :key="j"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  }
})
export default class App extends Vue {
  gameController: any;
  currentCubePosition: any = {
    x: 0,
    y: 0
  };
  currentCube: any;
  active: string = 'active-cube';
  rows: number = 20;
  cols: number = 10;
  initMapGrid: Array<Array<number>>=[];
  // 基础7种方块类型
  // ■ ■
  // ■ ■
  c: Array<Array<Number>> = [[0,1,1,0], [0,1,1,0],[0,0,0,0],[0,0,0,0]];
  // ■ ■ ■ ■
  c1: Array<Array<Number>> = [[1,1,1,1], [0,0,0,0],[0,0,0,0],[0,0,0,0]];
  // ■
  // ■ ■ ■
  c2: Array<Array<Number>> = [[1,0,0,0], [1,1,1,0],[0,0,0,0],[0,0,0,0]];
  // ■ ■ ■
  // ■
  c3: Array<Array<Number>> = [[1,1,1,0], [1,0,0,0],[0,0,0,0],[0,0,0,0]];
  // ■ ■
  //   ■ ■
  c4: Array<Array<Number>> = [[1,1,0,0], [0,1,1,0],[0,0,0,0],[0,0,0,0]];
  //   ■ ■
  // ■ ■
  c5: Array<Array<Number>> = [[0,1,1,0], [1,1,0,0],[0,0,0,0],[0,0,0,0]];
  //   ■
  // ■ ■ ■
  c6: Array<Array<Number>> = [[0,1,0,0], [1,1,1,0],[0,0,0,0],[0,0,0,0]];
  randomArray: Array<any> = [this.c1, this.c2, this.c3, this.c4, this.c5, this.c6]
  @Watch('currentCube')
  onCurrentCubeChanged(val: any, oldVal: any){
    // console.log(val, oldVal)
  }
  
  mounted() {
    this.initMap()
  }
  /** 初始化地图 */
  initMap():void {
    for (let i = 0; i < this.rows; i++) {
      this.$set(this.initMapGrid, i, [])
      for (let j = 0; j < this.cols; j++) {
        this.$set(this.initMapGrid[i], j, 0)
      }
    }
  }
  /* 方块UI引擎 */
  qubeEngine(randomCube: any): void {
    this.initMap();
    for (let i = 0; i < randomCube.length; i++) {
      const element = randomCube[i];
      for (let j = 0; j < element.length; j++) {
        const element1 = element[j];
        if(element1 === 1) {
          this.$set(this.initMapGrid[i + this.currentCubePosition.y], j + this.currentCubePosition.x, 1)
        }
      }
    }
    this.currentCubePosition.y++;
  }
  /* 开始 */
  start(): void {
    let randomNum: number = parseInt((Math.random() * 10).toFixed(0)) % 5
    this.currentCube = this.randomArray[randomNum]
    this.gameController = setInterval(() => {
      this.qubeEngine(this.currentCube)
    }, 1000)
    document.onkeydown = (event: any) => {
      console.log(event.keyCode)
      if (event.keyCode === 39) {
        this.currentCubePosition.x ++
      }
      if (event.keyCode === 37) {
        this.currentCubePosition.x --
      }
      if (event.keyCode === 38) {
        this.currentCube = this.rotate(this.currentCube)
      }
    }
  }
  /* 暂停 */
  pause(): void {
    clearInterval(this.gameController)
  }
  /* 碰撞检测算法 */
  collisionDetection(): void {

  }
  /* 旋转算法 */
  rotate(randomCube: any): Array<any> {
      let rotatedCube: Array<any> = [[],[],[],[]]
      for (let i = 0; i < randomCube.length; i++) {
      const element = randomCube[i];
      for (let j = 0; j < element.length; j++) {
        rotatedCube[i][j] = randomCube[j][i]
      }
    }  
    return rotatedCube
    console.log(randomCube)
    console.log(rotatedCube)
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.active-cube {
  background-color: yellow!important;
}
.gameBtn {
  cursor: pointer;
  &:hover {
    color: yellow;
  }
}
</style>
